<template>
  <div>
    <a-alert message="新版商品信息保存至草稿箱，需发布成功后，才能在线上商品中生效。" type="info" show-icon/>

    <div style="margin-top: 16px">
      <a-form layout="inline" :form="form" @submit="handleSearch">
        <div class="search">
          <div class="searchForm">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item :label="`商品编号`">
                  <a-input placeholder="请输入商品编号" v-decorator="['productId']" :style="{width:'200px'}"/>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item :label="`商品名称`">
                  <a-input placeholder="请输入商品名称" v-decorator="['productName']" :style="{width:'200px'}"/>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item :label="`商品类目`">
                  <a-input placeholder="请输入商品类目" v-decorator="[`productClass`]" :style="{width:'200px'}"/>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item :label="`生成时间`">
                  <a-range-picker v-decorator="['createTime']" :style="{width:'200px'}"/>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
          <div class="searchBtn">
            <a-button :style="{marginTop:'20px'}" type="primary" html-type="submit">
              查询
            </a-button>
            <br/>
            <a-button :style="{marginTop:'20px'}" @click="handleReset">
              重置
            </a-button>
          </div>
        </div>
      </a-form>
      <a-table :columns="columns" :data-source="data" :style="{marginTop:'15px',float:'left',width:'100%'}">
        <template slot="action">
          <a>修改</a>
          <a style="margin-left: 5px">删除</a>
        </template>
      </a-table>
    </div>
  </div>

</template>

<script>
  const columns = [
    {
      title: '商品信息',
      dataIndex: 'productDesc',
      key: 'productDesc'
    },
    {
      title: '商品状态',
      dataIndex: 'productStatus',
      key: 'productStatus'
    },
    {
      title: '生成时间',
      key: 'createTime',
      dataIndex: 'createTime'
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ]

  const data = [
    {
      'productDesc': '测试商品',
      'productStatus': '暂提',
      'createTime': '2020-12-30 00:00:00'
    }
  ]

  export default {
    name: 'ManageProductDraft',
    data () {
      return {
        form: this.$form.createForm(this, { name: 'product_online_search' }),
        columns: columns,
        data: data
      }
    },
    methods: {
      handleSearch (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
          }
        })
      },
      handleReset () {
        this.form.resetFields()
      }
    }
  }
</script>

<style scoped>
  .search {
    width: 100%;
  }

  .searchForm {
    float: left;
    width: 92%;
  }

  .searchBtn {
    border-left: 1px solid #edeff2;
    float: right;
    width: 8%;
    height: 120px;
    padding-left: 20px;
  }
</style>
